<template>
	<view class="uni-container">
		<view class="header">
			<view class="back">
				<view @click="navigateBack" style="margin-left: 15px;display: flex;align-items: center;color: #fff;">
					<uni-icons type="back" size="24" color="#fff"></uni-icons>
					<text>返回</text>
				</view>
			</view>
		</view>
		<uni-forms ref="form" :label-width="90" :model="formData" validateTrigger="submit" err-show-type="toast">
			<view class="edit-box">
				<view class="title">
					<textarea class="uni-input" v-model="formData.title" auto-height
						@input="() => autoSaveContent && autoSaveContent()" placeholder="文章标题" />
				</view>
				<editor-component @textchange="onTextChange" @ready="onEditorReady"></editor-component>
				<view class="settings">
					<uni-forms-item name="activity_id" label="关联活动">
						<uni-data-picker v-model="formData.activity_id" collection="qmy-activity"
							field="name as text, _id as value"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item name="thumbnail" label="封面" required>
						<view style="display: flex;flex-direction: row;flex-wrap: wrap;">
							<view
								style="position: relative;width: 300rpx;height: 300rpx;border: 1rpx solid #F0F0F0;border-radius: 20rpx;text-align: center;line-height: 300rpx;margin-right: 30rpx;margin-bottom: 30rpx;"
								v-if="formData.thumbnail.length > 0" v-for="(img,index) in formData.thumbnail"
								:key="index">
								<view
									style="position: absolute;right: 10rpx;top: 10rpx;z-index: 1;background: #6666667d;border-radius: 200rpx;width: 50rpx;height: 50rpx;line-height: 50rpx;"
									@click="() => removeThumbnail(index)">
									<uni-icons type="closeempty" size="16" color="#ffffff"></uni-icons>
								</view>
								<image style="width: 150px;height: 150px;position: absolute;top:0;left: 0;" :src="img">
								</image>
							</view>
							<view v-if="formData.thumbnail.length <6" @click="() => openInsertImageDrawer()"
								style="width: 300rpx;height: 300rpx;border: 1rpx solid #F0F0F0;border-radius: 20rpx;text-align: center;line-height: 300rpx;">
								<uni-icons class="placeholder" type="plusempty" size="60" color="#e8e8e8"></uni-icons>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item name="user_id" label="作者" required>
						<uni-data-picker v-model="formData.user_id" style="width: 200px;" collection="uni-id-users"
							where="role=='uni-cms-author'||role=='admin'"
							field="nickname as text, _id as value"></uni-data-picker>
					</uni-forms-item>
					<!-- <uni-forms-item name="category_id" label="分类">
						<uni-data-picker v-model="formData.category_id" style="width: 200px;"
							collection="uni-cms-categories" field="name as text, _id as value"></uni-data-picker>
					</uni-forms-item> -->
					<uni-forms-item name="is_sticky" label="推荐">
						<switch @change="binddata('is_sticky', $event.detail.value)" style="transform:scale(0.75)"
							:checked="formData.is_sticky"></switch>
					</uni-forms-item>
					<uni-forms-item name="is_essence" label="精选">
						<switch @change="binddata('is_essence', $event.detail.value)" style="transform:scale(0.75)"
							:checked="formData.is_essence"></switch>
					</uni-forms-item>
					<uni-forms-item name="comment_status" label="开放评论">
						<uni-data-checkbox v-model="formData.comment_status"
							:localdata="formOptions.comment_status_localdata"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item name="audit_status" label="审核状态">
						<uni-data-checkbox v-model="formData.audit_status"
							:localdata="auditStatusRange"></uni-data-checkbox>
					</uni-forms-item>
				</view>
				<view class="uni-button-group m" style="padding-bottom: 50px">
					<button class="uni-button" style="width: 100px;margin-right: 10px;" @click="submit(0)">存为草稿</button>
					<button type="primary" class="uni-button" style="width: 100px;" @click="submit(1)">发布</button>
				</view>
			</view>
		</uni-forms>
		<view class="footer">
			<view class="wrap">
				<view class="left">
					<text class="auto-save" v-if="autoSave">
						{{ autoSave.status === 1 ? '自动保存中...' : '已自动保存' }}
					</text>
					<text class="word-count" v-if="wordCount !== null">共 {{ wordCount }} 字</text>
				</view>
				<view class="right">
					<view class="uni-button-group">
						<button class="uni-button" style="width: 100px;margin-right: 10px;"
							@click="submit(0)">存为草稿</button>
						<button type="primary" class="uni-button" style="width: 100px;" @click="submit(1)">发布</button>
					</view>
				</view>
			</view>
		</view>

		<uni-drawer class="insert-image-drawer" v-if="drawerWidth" ref="insertImageDrawer" mode="right"
			:width="drawerWidth">
			<uni-media-library mode="picker" :selected-count="6" :media-tabs="['image']"
				@onInsert="onInsertCover"></uni-media-library>
		</uni-drawer>
	</view>
</template>

<script>
	// 引入编辑器组件
	import EditorComponent from "@/uni_modules/uni-cms/components/editor/editor.vue";
	// 引入表单验证规则
	import {
		validator
	} from '@/uni_modules/uni-cms/common/validator/uni-cms-articles.js';
	// 自动保存mixin
	import autoSaveMixin from '@/uni_modules/uni-cms/common/auto-save-mixin.js';
	import {
		parseImageUrl,
		parseEditorImage
	} from "@/uni_modules/uni-cms/common/parse-image-url";

	// 引入数据库和相关命令
	const db = uniCloud.database();
	const dbCmd = db.command;
	// 定义数据库集合名称
	const dbCollectionName = 'uni-cms-articles'

	// 获取表单验证规则
	function getValidator(fields) {
		let result = {}
		for (let key in validator) {
			if (fields.includes(key)) {
				result[key] = validator[key]
			}
		}
		return result
	}

	export default {
		components: {
			EditorComponent
		},
		mixins: [autoSaveMixin],
		data() {
			// 初始化formData
			let formData = {
				"user_id": uniCloud.getCurrentUserInfo().uid,
				"category_id": "",
				"activity_id": "",
				"title": "",
				"content": {},
				"excerpt": "",
				"article_status": 0,
				"is_sticky": null,
				"is_essence": null,
				"comment_status": 1,
				"thumbnail": [],
				"audit_status": 1
			}
			return {
				formData, // 表单数据
				formOptions: {
					"comment_status_localdata": [{
							"value": 0,
							"text": "关闭"
						},
						{
							"value": 1,
							"text": "开放"
						}
					]
				},
				auditStatusRange: [{
					text: '审核中',
					value: 0
				}, {
					text: '审核通过',
					value: 1
				}, {
					text: '审核不通过',
					value: 2
				}],
				rules: {
					...getValidator(Object.keys(formData)) // 表单验证规则
				},
				formats: {}, // 编辑器格式
				wordCount: null, // 字数统计
				drawerWidth: 0, // 插入图片抽屉宽度
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules) // 设置表单验证规则
		},
		mounted() {
			const sysinfo = uni.getSystemInfoSync()
			this.drawerWidth = sysinfo.windowWidth * .8
		},
		methods: {
			// 监听富文本编辑器内容变化
			onTextChange(e) {
				// 更新字数统计
				this.wordCount = e.detail
				// 自动获取编辑器正文内的图片作为封面图
				this.autoGetEditorImage()
				// 自动保存
				this.autoSaveContent && this.autoSaveContent()
			},
			autoGetEditorImage() {
				// 获取编辑器中的图片
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					this.editorCtx.getContents({
						success: (res) => {
							const {
								delta
							} = res
							const imageList = []
							delta.ops.forEach(item => {
								if (item.insert && item.insert.image) {
									if (!item.attributes || !item.attributes.class || item
										.attributes.class.indexOf('uploading') === -1) {
										const parseEditorImages = parseEditorImage(item)
										imageList.push(parseEditorImages[0])
									}
								}
							})

							if (imageList.length <= 0) return
							const newThumbnail = [...this.formData.thumbnail]

							for (let i = 0; i < newThumbnail.length; i++) {
								const thumbnail = newThumbnail[i]
								if (thumbnail !== imageList[i].source) {
									newThumbnail[i] = imageList[i] || {}
								}
							}
							this.formData.thumbnail = newThumbnail
						},
						fail: (e) => {
							console.error(e)
						}
					})
				}, 1000)

			},
			// 富文本编辑器初始化完成后触发
			onEditorReady(editorCtx) {
				if (!editorCtx) return

				// 保存editorCtx
				this.editorCtx = editorCtx

			},
			/**
			 * 验证表单并提交
			 */
			submit(status) {
				if (!this.formData.title) {
					// 如果标题为空，提示用户
					uni.hideLoading()
					return uni.showToast({
						icon: 'none',
						title: '文章标题必填',
					})
				}

				// if (this.formData.thumbnail) {
				// 	for (const thumbnail of this.formData.thumbnail) {
				// 		if (!thumbnail.source) {
				// 			// 如果封面图为空，提示用户
				// 			uni.hideLoading()
				// 			return uni.showToast({
				// 				icon: 'none',
				// 				title: '封面图必填',
				// 			})
				// 		}
				// 	}
				// }

				this.$refs.form.validate().then((res) => {
					this.editorCtx.getContents({
						success: (e) => {
							console.log(e.html)
							// 提交表单
							this.submitForm({
								...res,
								thumbnail: this.formData.thumbnail,
								article_status: status,
								title: this.formData.title.trim(),
								content: e.html,
								publish_date: Date.now()
							})
						}
					})
				}).catch((e) => {
					console.error(e)
				})
			},

			/**
			 * 提交表单
			 */
			submitForm(value) {
				uni.showLoading({
					mask: true
				})
				// 使用 clientDB 提交数据
				return db.collection(dbCollectionName).add(value).then((res) => {
					uni.showToast({
						icon: 'none',
						title: value.article_status === 0 ? '保存成功' : '发布成功'
					})
					try {
						// 触发父页面事件，刷新数据
						this.getOpenerEventChannel().emit('refreshData')
					} catch (e) {}

					// 清除自动保存内容
					this.clearAutoSaveStorage && this.clearAutoSaveStorage()

					setTimeout(() => {
						if (value.article_status === 0) {
							// 跳转到编辑页面
							uni.redirectTo({
								url: '/uni_modules/uni-cms/pages/article/edit/edit?id=' + res
									.result.id
							})
						} else {
							// 返回上一页
							uni.navigateBack()
						}
					}, 500)
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},

			// 返回上一页或跳转到文章列表页
			navigateBack() {
				const pages = getCurrentPages()

				if (pages.length > 1) {
					// 返回上一页
					uni.navigateBack(-1)
				} else {
					// 跳转到文章列表页
					uni.redirectTo({
						url: '/uni_modules/uni-cms/pages/article/list/list'
					})
				}
			},

			openInsertImageDrawer() {
				this.$refs.insertImageDrawer.open()
			},
			async onInsertCover(selectMediaItems) {
				selectMediaItems.forEach(item => {
					if (this.formData.thumbnail.length == 6) {
						return uni.showToast({
							title: '最多只能选择6张图片',
							icon: 'none'
						})
					} else {
						this.formData.thumbnail.push(item.src)
					}
				})
				this.$refs.insertImageDrawer.close()
			},
			removeThumbnail(index) {
				if (index >= 0 && index < this.formData.thumbnail.length) {
					this.formData.thumbnail.splice(index, 1); // 删除 index 位置的元素
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '无效的索引',
						icon: 'none'
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	@import '@/uni_modules/uni-cms/common/style/article-detail.scss';
</style>